<template>
    <div id="nuclemap" ref="nuclemap">
        <Loading v-show="isLoading"></Loading>
        <!-- <img
            src="../../assets/images/Screen.png"
            :class="{'btn_small':bigscreen,'btn_big':!bigscreen}"
            @click="nuclemap()"
            v-show="bigscreen"
            alt="全屏"
        />
        <img
            src="../../assets/images/outScreen.png"
            :class="{'btn_small':bigscreen,'btn_big':!bigscreen}"
            @click="exitFullscreen()"
            v-show="!bigscreen"
            alt="退出全屏"
        /> -->
        <div class="account" v-show="acc_status">
            <li v-for="(item, index) in list" :key="index">
                <img :src="require('../../assets/images/' + item.color + '.png')" alt="" />
                <span>
                    {{
                        item.color === "green"
                            ? "正常进行"
                            : item.color === "yellow"
                            ? "有延期风险"
                            : item.color === "red"
                            ? "已经延期" : "已完成"
                    }}
                </span>
            </li>
            <div class="round" @click="acc_status = false"></div>
        </div>
        <div :id="text"></div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import Loading from "@/components/bubbles";
import { styleJson } from "./index";
export default {
    components: { Loading },
    props: {
        speedlist: {
            type: Array,
            default: () => [],
        },
        taskId: {
            type: Number,
        },
    },
    data() {
        return {
            isLoading: false,
            styleJson: styleJson,
            SuperviseHomeNum: [],
            list: [
                { color: "green" },
                { color: "yellow" },
                { color: "red" },
                { color: "blue" },
            ],
            bigscreen: true,
            acc_status: true,
            text: "markermap_small",
            intervalIdmap:null
        };
    },
    created() {
        this.dataRefreh();
    },
    mounted() {
        let that = this;
        // this.isLoading = true;
        this.$axios
            .post(api.queryCollectSpeedInfo, {
                taskId: this.taskId,
                orderBy: 2,
            })
            .then((res) => {
                if (res.data.code === 1) {
                    that.SuperviseHomeNum = res.data.object;
                    that.createMap();
                    // that.isLoading = false;
                }
            })
            .catch(() => {});

    },
    methods: {
        // 定时刷新数据函数
        dataRefreh() {
            if (this.intervalIdmap != null) {
                return;
            }
            this.intervalIdmap = setInterval(() => {
                let that = this;
                // this.isLoading = true;
                this.$axios
                    .post(api.queryCollectSpeedInfo, {
                        taskId: this.taskId,
                        orderBy: 2,
                    })
                    .then((res) => {
                        if (res.data.code === 1) {
                            that.SuperviseHomeNum = res.data.object;
                            that.createMap();
                            // that.isLoading = false;
                        }
                    })
                    .catch(() => {});
            }, 60000);
        },
        // 停止定时器
        clear() {
            clearInterval(this.intervalIdmap); //清除计时器
            this.intervalIdmap = null; //设置为null
        },
        nuclemap() {
            // 全屏
            this.bigscreen = false;
            this.text = "markermap_big";
            var full = document.getElementById("nuclemap");
            this.launchIntoFullscreen(full);
        },
        // 全屏封装
        launchIntoFullscreen(full) {
            if (full.requestFullscreen) {
                full.requestFullscreen();
            } else if (full.mozRequestFullScreen) {
                full.mozRequestFullScreen();
            } else if (full.webkitRequestFullscreen) {
                full.webkitRequestFullscreen();
            } else if (full.msRequestFullscreen) {
                full.msRequestFullscreen();
            }
        },
        // 退出全屏
        exitFullscreen() {
            this.bigscreen = true;
            this.text = "markermap_small";
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        },
        createMap() {
            // 创建地图实例
            var map = new BMap.Map(this.text);
            let rank;
            if (
                this.SuperviseHomeNum.length > 1 &&
                this.SuperviseHomeNum.length > 5
            ) {
                rank = 12;
            } else if (
                this.SuperviseHomeNum.length > 1 &&
                this.SuperviseHomeNum.length < 5
            ) {
                rank = 14;
            } else {
                rank = 18;
            }
            map.centerAndZoom(
                new BMap.Point(
                    this.SuperviseHomeNum[0].longitude,
                    this.SuperviseHomeNum[0].latitude
                ),
                rank
            );
            // 地图主题颜色配置
            setTimeout(() => {
                map.setMapStyleV2({
                    styleJson: styleJson,
                });
            }, 300);
            // 开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);
            for (let i = 0; i < this.SuperviseHomeNum.length; i++) {
                if (
                    this.SuperviseHomeNum[i].longitude !== "" &&
                    this.SuperviseHomeNum[i].latitude !== ""
                ) {
                    var points = new BMap.Point(
                        this.SuperviseHomeNum[i].longitude,
                        this.SuperviseHomeNum[i].latitude
                    );
                    var color = this.SuperviseHomeNum[i].color;
                    this.addMarker(
                        i,
                        map,
                        points,
                        this.SuperviseHomeNum[i],
                        color
                    );
                }
            }
        },
        addMarker(index, map, points, data, color) {
            // 创建图标对象
            var myIcon = new BMap.Icon(
                require("../../assets/images/" + color + ".png"),
                new BMap.Size(112, 120)
            );
            // 创建标注对象并添加到地图
            var markers = new BMap.Marker(points, { icon: myIcon });
            map.addOverlay(markers);
            var steelContent =
                '<div style="width: 200;height: 188px;"><br><p style="margin:0;line-height:2;font-size:13px;text-indent:0.5em;color: #fff;">采集点名称 ：' +
                data.locationName +
                "</p>" +
                "" +
                '<p style="margin:0;line-height:2;font-size:13px;text-indent:0.5em;color: #fff;">已采集人数 ：' +
                data.num +
                " 人</p>" +
                "" +
                '<p style="margin:0;line-height:2;font-size:13px;text-indent:0.5em;color: #fff;">待采集人数 ：' +
                data.appointmentNum +
                " 人</p>" +
                "" +
                '<p style="margin:0;line-height:2;font-size:13px;text-indent:0.5em;color: #fff;">采集速度 ：' +
                data.collectSpeed +
                "人 / 1分钟</p>" +
                "" +
                '<p style="margin:0;line-height:2;font-size:13px;text-indent:0.5em;color: #fff;">工作通道 ：' +
                data.supportNum +
                " 个</p>" +
                "" +
                '<p style="margin:0;line-height:2;font-size:13px;text-indent:0.5em;color: #fff;">预计完成时间 ：' +
                data.endTime +
                "</p>" +
                "" +
                "</div>";
            var steelOpts = {
                width: 245, //信息窗口宽度
                height: 195, //信息窗口高度
                border: 0,
                enableMessage: true, //设置允许信息窗发送短息
            };
            // //添加鼠标滑过时打开自定义信息窗口事件
            markers.addEventListener("mouseover", function () {
                this.openInfoWindow(
                    new BMap.InfoWindow(steelContent, steelOpts)
                );
            });
            // //添加鼠标离开时关闭自定义信息窗口事件
            markers.addEventListener("mouseout", function () {
                this.closeInfoWindow();
            });
        },
    },
};
</script>
<style>
.BMap_bubble_title {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    background: transparent !important;
}
/* .BMap_pop{
    position: absolute;
    cursor: default;
    left: 194px !important;
    top: 168px !important;
} */
.BMap_pop .BMap_top {
    border: 0 !important;
    background: none !important;
}
.BMap_pop .BMap_center {
    border: 0 !important;
    border-radius: 20px !important;
    background: rgba(22, 62, 166, 0.8) !important;
}

.BMap_pop .BMap_bottom {
    border: 0 !important;
    background: none !important;
}
.BMap_pop div:nth-child(3) {
    background: transparent !important;
}

.BMap_pop div:nth-child(3) div {
    border-radius: 3px;
    display: none;
    background: none !important;
    border: 0 !important;
}

.BMap_pop div:nth-child(1) {
    border-radius: 3px 0 0 0;
    background: transparent !important;
    border: 0 !important;
}

.BMap_pop div:nth-child(1) div {
    background: none !important;
}

.BMap_pop div:nth-child(5) {
    border-radius: 0 0 0 3px;
    background: transparent !important;
    border: 0 !important;
}

.BMap_pop div:nth-child(5) div {
    border-radius: 3px;
    background: none !important;
}
.BMap_pop div:nth-child(1) img {
    display: none;
}
.BMap_pop div:nth-child(7) {
    background: transparent !important;
}
.BMap_pop div:nth-child(7) div {
    border-radius: 3px;
    background: none !important;
}

img[src="https://api.map.baidu.com/images/iw3.png"]
{
    margin-top: -722px !important;
    filter: alpha(opacity=89);
    content: url("../../assets/images/iw3.png");
}
.anchorBL {
    display: none;
}
</style>
<style lang="less">
#nuclemap {
    width: 100%;
    height: 100%;
    border-radius: 0.0625rem;
    .account{
        width: 592px;
        height: 44px;
        display: flex;
        background: #02091B;
        border: 1px solid #FFFFFF;
        border-radius: 21px;
        position: absolute;
        top: 45%;
        left: 25%;
        z-index: 999;
        li{
            margin:-8px 0 0 0;
            img{
                width: 56px;
                height: 60px;
            }
        }
        li:nth-child(1){
            margin-left: 28px;
        }
        .round{
            width: 35px;
            height: 35px;
            background: rgba(238,239,243, 0.3);
            border-radius: 50%;
            position: relative;
            left:58px;
            top:3px;
            cursor: pointer;
            background-image: url('../../assets/images/rclose.png');
            background-repeat: no-repeat;
            background-size: 12px 12px;
            background-position: 50% 50%;
        }
    }
    .btn_small {
        width: 25px;
        height: 25px;
        position: absolute;
        top: 45%;
        left: 75%;
        cursor: pointer;
        color: #fff;
        z-index: 9999;
    }
    .btn_big {
        width: 25px;
        height: 25px;
        position: absolute;
        top: 12px;
        left: 98%;
        cursor: pointer;
        color: #fff;
    }
    #markermap_small {
        width: 1035px;
        height: 528px;
        border-radius: 14px;
    }
    #markermap_big {
        width: 100%;
        height: 100%;
    }
    .anchorBL {
        display: none;
    }
    .bg-color-black {
        height: 4.8125rem;
        border-radius: 0.125rem;
    }
    .text {
        color: #c3cbde;
    }
    .chart-box {
        margin-top: 0.2rem;
        width: 2.125rem;
        height: 2.125rem;
        .active-ring-name {
            padding-top: 0.125rem;
        }
    }
}
</style>
